<template>
  <div class="">
    <h1>生命周期函数</h1>
    <button @click="msg++">msg++</button>
    <h1 id="box" ref="box">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 10,
    };
  },
  methods: {},
  computed: {},

  beforeCreate() {
    console.log(this.msg);
  },
  //实例创建之前，在这个函数中data和methods 不能用

  created() {
    console.log(this.msg);
  },
  //实例创建完成 这是最早可以使用data和methods的钩子函数

  beforeMount() {
    console.log(document.getElementById("box"));
    console.log(this.$refs.box);
    //在 vue如果要获取dom节点 给元素起一个ref 然后通过this.$refs.xx 就能拿到这个节点了
  },
  //节点挂载之前
  mounted() {
    console.log(document.getElementById("box"));
    console.log(this.$refs.box);
  },
  //节点挂载之后 在这个钩子函数中 整个页面才完全加载完成，在这里我们可以执行ajax

  //以上四个是创建阶段的钩子函数，在一个生命周期中只执行一次

  beforeUpdate() {
    console.log(this.msg); //11
    console.log(this.$refs.box.innerHTML); //10
  },
  updated() {
    console.log(this.msg); //11
    console.log(this.$refs.box.innerHTML); //11
  },
  //视图的更新 视图的更新是由数据更新引起的

  //以上两个是更新阶段的钩子函数 可以执行0次和无数次

  beforeDestroy() {},
  //销毁之前 是最后一个可以使用 data和methods的钩子函数
  destroyed() {},
  //销毁之后

  //   以上两个是销毁阶段的钩子函数
};
</script>

<style lang="scss"></style>
